<div
  [class.devui-time-axis-horizontal]="_direction === 'horizontal'"
  [class.devui-time-axis-vertical]="_direction === 'vertical'"
  [class.devui-time-axis-horizontal-fullwidth]="_direction === 'horizontal' && _widthMode === 'fitWidth'"
>
  <ng-container *ngIf="data !== undefined">
    <d-time-axis-item
      *ngFor="let list of data.list"
      [model]="data.model"
      [direction]="_direction"
      [time]="list.time"
      [timePosition]="data.position"
      [position]="list.position"
      [lineStyle]="list.lineStyle"
      [customDot]="list.customDot"
      [dotColor]="list.dotColor"
      [iconClass]="list.iconClass"
      [type]="list.type"
      [status]="list.status"
      [extraElement]="list.extraElement"
      [text]="list.text"
      [contentTemplate]="contentTemplate"
      [data]="list.data"
      [horizontalAlign]="data.horizontalAlign || 'center'"
      (statusChanged)="changeStatusLine($event)"
    >
    </d-time-axis-item>
  </ng-container>
  <ng-content select="d-time-axis-item"></ng-content>
</div>
